<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://cn.vuejs.org/v2/guide/list.html</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div class="container" id="box">
    <div class="col-lg-12">
        <div class="panel panel-info">
            <div class="panel-heading panel-title">
                <div class="col-lg-12">
                    Hello World
                </div>
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 col-lg-2 control-label" for="name">Name</label>
                        <div class="col-sm-10 col-lg-10">
                            <input class="form-control" type="text" id="name" v-model="name"
                                   placeholder="input name...">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 col-lg-2 control-label" for="age">Age</label>
                        <div class="col-sm-10 col-lg-10">
                            <input class="form-control" type="number" id="age" v-model="age" placeholder="input age..">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-2 col-lg-2 control-label"></div>
                        <div class="col-lg-10">
                            <button class="btn btn-danger" v-on:click="add">Add</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12">
        <table class="table">
            <thead></thead>
            <tbody class="table-bordered">
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
                <th class="col-sm-2">operation</th>
            </tr>
            <tr v-for="(p,k) in person" v-if="p.age > 0">
                <td>{{ k }}</td>
                <td v-bind:class="{'label-info':p.age > 11111}">{{ p.name }}</td>
                <td>{{ p.age }}</td>
                <td>
                    <button class="btn btn-sm btn-danger" v-on:click="del(k)">Delete</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button class="btn btn-sm btn-default" v-on:click="person.shift()">Shift</button>
                </td>
                <td>
                    <button class="btn btn-sm btn-info" v-on:click="person.push({name:'fff',age:12})">Push</button>
                </td>
                <td>
                    <button class="btn btn-sm btn-warning" v-on:click="person.sort()">Sort</button>
                </td>
                <td>
                    <button class="btn btn-sm btn-danger" v-on:click="person.reverse()">Reverse</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="col-lg-12">
        <ul class="list-group">
            <li class="list-group-item" v-for="(p,k) in person">
                {{ k }} --> name: {{ p.name }} age: {{ p.age }}
                <span class="pull-right" v-on:click="person.splice(k, 1)">✖️</span>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {
            name: '',
            age: undefined,
            person: [
                {
                    name: "zhang",
                    age: 11
                },
                {
                    name: "zing",
                    age: 22
                },
                {
                    name: "qqqq",
                    age: 33
                },
                {
                    name: "aaa",
                    age: 88
                }
            ]
        },
        methods: {
            add: function () {
                if (this.name !== '' || this.age !== undefined) {
                    this.person.push({name: this.name, age: this.age})
                }
                this.name = '';
                this.age = undefined;
            },
            del: function (k) {
                this.person.splice(k, 1)
            },
        }
    })
</script>